<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/9
  Time: 18:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
    <script src="CSS/bootstrap.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.css">
</head>

<style type="text/css">

    #result {
        color: red;
    }

    #context {
        position: absolute;
        width: 457px;
        margin-top: 0;
        z-index: 100;
        background-color: #cccccc;
        border-width: 2px;
    }

    form {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }

    .choose {
        background-color: deepskyblue;
        color: white;
        cursor: pointer;
    }

    .group input {
        width: 50%;
        float: left;
    }

    .group button {
        float: left;
    }

    .group {
        overflow: hidden;
    }

    .form-group {
        float: left;
    }

    .form-group:last-child {
        width: 800px;
    }
    table{
        text-align: center;
    }

</style>

<body>

<%
    int num = 0;
%>

<form role="form" action="AccurateSelectTopicByTopicServlet" method="post">

    <div class="form-group">
        <label for="exampleInput3">板块编号</label>
        <div class="group">
            <input type="text" readonly="readonly" class="form-control" name="bId" id="exampleInput3" value="${requestScope.blank.bId}"
                   placeholder="板块编号">
        </div>
    </div>

    <div class="form-group">
        <label for="exampleInput2">当前板块</label>
        <div class="group">
            <input type="text" readonly="readonly" class="form-control" name="bName" id="exampleInput2" value="${requestScope.blank.bName}"
                   placeholder="板块名称">
        </div>
    </div>

    <div class="form-group">
        <label for="exampleInput1">请输入主贴标题</label>
        <div class="group">
            <input type="text" class="form-control" name="serch" id="exampleInput1" placeholder="请输入查询的内容">
            <button type="submit" class="btn btn-info">搜索</button>
        </div>
        <div id="context"></div>
    </div>

</form>


<table class="table table-hover">
    <tr>
        <td>编号</td>
        <td>帖子标题</td>
        <td>帖子内容</td>
        <td>发帖人</td>
        <td>发帖时间</td>
        <td>操作</td>
    </tr>

    <c:forEach items="${requestScope.topicList}" var="u" varStatus="s">
        <tr>
            <td><%=(++num)%>
            </td>
            <td>${u.title}</td>
            <td>${u.context}</td>
            <td>${u.user.uName}</td>
            <td>${u.pTime}</td>
            <td>
                <a href="SelectReplyByTopic?bId=${u.blank.bId}&title=${u.title}">查看回帖</a>&nbsp;
                <a href="getTopicInfoForReplyServlet?pId=${u.pId}&title=${u.title}&context=${u.context}&pTime=${u.pTime}">回复该贴</a>
            </td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="5">
            <a class="btn btn-default" href="SelectAllTopic?bId=${requestScope.blank.bId}&bName=${requestScope.blank.bName}&currentPageIndex=1">首页</a>
            <a class="btn btn-default" href="SelectAllTopic?bId=${requestScope.blank.bId}&bName=${requestScope.blank.bName}&currentPageIndex=${requestScope.index-1}">上一页</a>
            <a class="btn btn-default" href="SelectAllTopic?bId=${requestScope.blank.bId}&bName=${requestScope.blank.bName}&currentPageIndex=${requestScope.index+1}">下一页</a>
            <a class="btn btn-default" href="SelectAllTopic?bId=${requestScope.blank.bId}&bName=${requestScope.blank.bName}&currentPageIndex=${requestScope.totalPage}">尾页</a>
            <a href="javascript:history.go(-1)" class="btn btn-default">返回上一级</a>
        </td>
    </tr>
</table>
<div id="result">
    ${requestScope.result}
</div>


</body>

<script>
    $(function () {
        $("#exampleInput1").keyup(function () {
            var $contxt = $("#exampleInput1").val();
            if ($contxt != "") {
                $.ajax({
                    type: "post",
                    url: "AccurateSelectTopicByKeywordServlet",
                    data: {serch: $("#exampleInput1").val(),bId:$("#exampleInput3").val()},
                    success: function (data) {
                        var titles = data;
                        var titleList = titles.split(",");
                        var $context = $("#context").html();
                        $context = ""; //先清空历史记录
                        for (var i = 0; i < titleList.length - 1; i++) {
                            $context += "<div onmouseover='slideOn(this)' onmouseout='slideOut(this)' onclick='cleck(this)'>";
                            $context += "" + titleList[i] + "";
                            $context += "</div>";
                        }
                        $("#context").html($context);//将内容添加进去
                    }
                });
            } else {
                $("#context").text("");
            }
        });
    })

    function slideOn(e) {
        $(e).addClass("choose");
    }

    function slideOut(e) {
        $(e).removeClass("choose");
    }

    function cleck(e) {
        var $text = $(e).text(); //获取点击对象的内容
        $("#exampleInput1").val($text); //将选择的内容赋予搜索框中
        $("#context").text(""); //清空查询提示栏
    }

</script>

</html>
